<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>创建金额</h3>
      <el-form ref="dataForm" :rules="rules" :model="dataForm">
        <el-row>
          <el-col :span="16">
            <el-form-item label="项目" prop="status">
              <el-select
                v-model="dataForm.shopName"
                clearable
                style="width: 200px"
                class="filter-item"
                placeholder="请选择项目"
                @change="selectProductType" >
                <el-option v-for="(item,index) in shopList" :key="index" :label="item.shopName" :value="{ value: item.id, label: item.shopName}" />
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="dataForm.companyName" clearable class="filter-item" placeholder="公司名称" />
            </el-form-item>
            <el-form-item label="费用名称" prop="moneyName">
              <el-input v-model="dataForm.moneyName" clearable class="filter-item" placeholder="费用名称" />
            </el-form-item>
            <el-form-item label="金额" prop="money">
              <el-input v-model="dataForm.money" clearable class="filter-item" placeholder="money" />
            </el-form-item>
            <el-form-item label="简述" prop="desc">
              <el-col :span="12">
                <el-input v-model="dataForm.desc" clearable placeholder="简述" type="textarea" />
              </el-col>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="文件">
              <el-upload
                :action="uploadPath"
                :headers="headers"
                :file-list="imgsFileList"
                :on-success="handleFilesUrl"
                :on-remove="handleFilesRemove"
                multiple
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!--      <el-tag
        v-for="tag in dynamicTags"
        :disable-transitions="false"
        :key="tag"
        effect="dark"
        type="success"
        size="medium"
        closable
        @close="handleClose(tag)">{{ tag }}</el-tag>
      <el-input
        v-if="inputVisible"
        ref="saveTagInput"
        v-model="inputValue"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm" />
      <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>-->
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-if="!list_info.id" type="primary" @click="createData">保存</el-button>
      <el-button v-if="list_info.id" type="primary" @click="updateData">更新</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
	.box-card {

		.el-row,
		.el-form {
			width: 100%;
		}

		.filter-item{
			width: 300px;
		}

		.el-card__body>.el-form .el-form-item {
			width: auto;
		}

		.el-card {
			margin-bottom: 10px;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.input-new-keyword {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		}

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #20a0ff;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 120px;
			height: 120px;
			line-height: 120px;
			text-align: center;
		}

		.avatar {
			width: 145px;
			height: 145px;
			display: block;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.button-new-tag {
			margin-left: 10px;
			height: 32px;
			line-height: 30px;
			padding-top: 0;
			padding-bottom: 0;
		}

		.input-new-tag {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		}
	}
	.op-container{
		padding-top: 30px;
	}
</style>

<script>
import {
  list,
  create,
  update
} from '@/api/shopMoney'
import { selectShop } from '@/api/frontutil'
// import Pagination from "@/components/Pagination";
import {
  uploadPath
} from '@/api/storage'
import {
  getToken
} from '@/utils/auth'

export default {
  name: 'CmsArticle',

  filters: {},
  data() {
    return {
      shopList: [],
      uploadPath,
      imgsFileList: [],
      freightList: [],
      list_info: {},
      rules: {
        companyName: [{
          required: true,
          message: '公司名称不能为空',
          trigger: 'blur'
        }],
        moneyName: [{
          required: true,
          message: '费用类型不能为空',
          trigger: 'blur'
        }],
        money: [{
          required: true,
          message: '金额不能为空',
          trigger: 'blur'
        }]
      },
      list: undefined,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20,
        status: undefined
      },
      options: [],
      dataForm: {
        id: undefined,
        fileList: []
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      selectedIds: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  computed: {
    headers() {
      return {
        accessToken: getToken()
      }
    }
  },
  created() {
    this.listShop()
    if (this.$route.query.list_info) {
      this.set_show_info()
    }
  },

  methods: {
    listShop() {
      selectShop()
        .then(response => {
          this.shopList = response.data.data
        })
        .catch(() => {
        })
    },
    selectProductType(data) {
      const { value, label } = data
      this.dataForm.shopName = label
      this.dataForm.shopId = value
    },
    // 设置初始化显示
    set_show_info() {
      this.list_info = JSON.parse(this.$route.query.list_info)
      this.dataForm = {
        adminId: this.list_info.adminId,
        companyName: this.list_info.companyName,
        shopId: this.list_info.shopId,
        shopName: this.list_info.shopName,
        gmtCreate: this.list_info.gmtCreate,
        gmtUpdate: this.list_info.gmtUpdate,
        jiedian: this.list_info.jiedian,
        desc: this.list_info.desc,
        id: this.list_info.id,
        money: this.list_info.money,
        moneyName: this.list_info.moneyName,
        fileList: JSON.parse(this.list_info.file)
        // label: this.list_info.label ? JSON.parse(this.list_info.label) : []
      }
      // this.dynamicTags = this.list_info.label ? JSON.parse(this.list_info.label) : []
      for (var j = 0; j < this.dataForm.fileList.length; j++) {
        this.imgsFileList.push({
          name: this.dataForm.fileList[j].name,
          url: this.getPreviwImg(this.dataForm.fileList[j].name)
        })
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.$set(this.dataForm, 'label', this.dynamicTags)
      this.inputVisible = false
      this.inputValue = ''
    },
    handleCancel() {
      this.$router.go(-1)
    },

    handleFilesUrl(response, file, fileList) {
      if (response.errno === 200) {
        this.imgsFileList.push({
          name: file.name,
          url: this.getPreviwImg(file.name)
        })
        debugger
        this.dataForm.fileList.push({
          name: file.name,
          url: response.url
        })
      }
    },
    handleFilesRemove: function(file, fileList) {
      for (var i = 0; i < this.dataForm.fileList.length; i++) {
        if (this.dataForm.fileList[i].name === file.name) {
          this.dataForm.fileList.splice(i, 1)
          this.imgsFileList.splice(i, 1)
        }
      }
    },

    getList() {
      this.listLoading = true
      list(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    empty() {
      this.listQuery.title = ''
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      create(this.dataForm)
        .then(response => {
          this.getList()
          this.dialogFormVisible = false
          this.$notify.success({
            title: '成功',
            message: '创建成功'
          })
          this.$router.go(-1)
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: '失败'
          })
        })
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      update(this.dataForm)
        .then(response => {
          this.getList()
          this.dialogFormVisible = false
          this.$notify.success({
            title: '成功',
            message: '更新成功'
          })
          this.$router.go(-1)
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: '失败'
          })
        })
    },
    handleCategoryChange(value) {
      this.listQuery.id = value[value.length - 1]
    },
    getImgUrl(image) {
      return require(`@/assets/file/${image}`)
    },
    getPreviwImg(filename) {
      filename = filename
        .substring(filename.lastIndexOf('.'))
        .toLowerCase()
        .split('.')[1]
      const imageObject = {
        png: 'png.png',
        jpg: 'png.png',
        jpeg: 'png.png',
        gif: 'png.png',
        doc: 'doc.png',
        docx: 'doc.png',
        xls: 'xls.png',
        xlsx: 'xls.png',
        pdf: 'pdf.png',
        zip: 'zip.png',
        '7z': 'zip.png',
        rar: 'zip.png',
        txt: 'file.png'
      }
      return this.getImgUrl(imageObject[filename])
    }

  }
}
</script>
